<template>
  <div>
    <button @click="initSkuList">多规格</button>
    <div>
      <div class="flex skuBox">
        <div>
          <div v-for="(item) in skuList" :key="item.key" class="flex" >
            <div class="sku">
              <div class="pb15">
                <label class="pr20">请输入规格名称</label>
                <el-input style="width: 400px" v-model="item.value"  placeholder="请输入规格名称"/>
              </div>
              <div class="flex ml100">
                <div>
                  <div class=" mb15" v-for="el in item.sku" :key="el.key">
                      <span class="pr20">请输入具体规格值</span>
                      <el-input style="width: 200px" v-model="el.value"  placeholder="请输入规格名称"/>
                      <el-icon v-if="item.sku.length > 1" @click="delDetail(item,el)" class="ml15 relative t5"><Close /></el-icon>
                  </div>
                </div>
                <el-icon class="skuAdd align-center ml30" size="16" @click="addSkuDetail(item)"><Plus /></el-icon>
              </div>
              
            </div>
            <el-icon v-if="skuList.length > 1" @click="delSku(item)" class="align-center ml15 close"><Close /></el-icon>
          </div>
        </div>
        <el-icon class="add align-center ml100" size="30" @click="addSku()"><Plus /></el-icon>
      </div>
      <div v-for="(item,index) in list" :key="item.key">
        <p><label>请选择规格组成</label></p>
        <el-select 
          v-for="(item,i) in skuList" 
          :key="item.key" 
          class="mr15" 
          :placeholder="`请选择${item.value}`"
          v-model="list[index].sku[i].value"
        >
            <el-option v-for="el in item.sku" :key="el.key" :value="el.value"></el-option>
        </el-select>
        <el-input class="mr15" v-model="item.price" style="width:100px" placeholder="请填写价格"/>
        <el-input style="width:100px" v-model="item.kucun" placeholder="请填写库存"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      skuList: [],
      list: [],
      value: '',
      x: ['']
    }
  },
  methods: {
    change (val) {
      console.log(val)
    },
    initSkuList () {
      this.skuList = []
      this.skuList.push({
          key: 1,
          value: '',
          sku: [{
            value: '',
            key: '1_1'
          }]
        })
      this.list = []
      this.list.push({
        key: Date.now(),
        price: '100',
        kucun: '100',
        sku: [
          {
            type: '',
            value: ''
          }
        ]
      }
      )
    },
    addSku () {
      this.skuList.push({
        key: this.skuList[this.skuList.length-1].key + 1,
        value: '',
        sku: [{
            value: '',
            key: this.skuList[this.skuList.length-1].key + 1 + "_1"
          }]
      })
      this.list.forEach(item => {
        item.sku.push({
          type: '',
          value: ''
        })
      })
      this.x.push('')
     
    },
    delSku (item) {
      let index = this.skuList.findIndex(el => el.key === item.key)
      this.skuList.splice(index,1)
    },
    addSkuDetail (item) {
      let index = this.skuList.findIndex(el => el.key === item.key)
      this.skuList[index].sku.push({
        value: '',
        key: item.key + '_' + (this.skuList[index].sku[this.skuList[index].sku.length-1].key.split('_')[1] - 0 + 1)
      })
      console.log(this.skuList)
    },
    delDetail (item,el) {
      let index = this.skuList.findIndex(el => el.key === item.key)
      let elIndex = this.skuList[index].sku.findIndex(elem => elem.key === el.key)
      this.skuList[index].sku.splice(elIndex,1)
    }
  }
}
</script>

<style lang="less" scoped>
.skuBox{
  .sku{
    border: 1px dashed #ccc;
    width: 600px;
    padding: 15px;
    margin: 20px 0;
    label,span{
      font-size: 13px;
      color: #333;
      font-weight: 600;
    } 
  }
  .close{
    border: 1px solid #333;
    padding: 2px;
    border-radius: 50%;
  }
  .add{
    background: #409EFF;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px #ccc;
  }
  .skuAdd{
    background: #409EFF;
    color: #fff;
    padding: 4px;
    border-radius: 50%;
    box-shadow: 1px 1px 2px #ccc;
  }
}

</style>
<!--
  有几个规格 
  skuList: [
    {
      key: '',
      value: '规格名称'，
      sku: [   当前规格名称包含的具体规格
        {
          key: '具体规格的key',
          value: '具体规格的值'
        },{}
      ]
    }
  ],
  list: [   规格名称中选择了哪个规格， price
    {
      price: '',
      cunkun: 10,
      sku: [
        {
          type: '颜色',
          value: '红色'
        },
        {
          type: '尺寸',
          value: 'S'
        }
      ]
    }
  ]
 -->